<template>
  <div>
    <v-header>
      <v-back></v-back>
    </v-header>
    <!-- 图片 -->
    <div class="img">
      <img :src="_localhost + data.img" alt="" />
    </div>
    <div class="main">
      {{num}}
      <p>
        <span>￥</span>
        <span>{{ data.price }}</span>
        <span
          ><del>￥{{ data.market_price }}</del></span
        >
        <span>
          <van-icon class="star" name="star-o" />
          <span class="right_span">收藏</span>
        </span>
      </p>
      <p>{{ data.goodsname }}</p>
      <p>{{ data.description }}</p>
      <p>11.11限时{{ data.price }}</p>
      <div>
        <div>此商品于2020-11-11，结束闪购特卖，品牌美妆闪购专场</div>
        <div class="look">查看></div>
      </div>
    </div>
    <!-- 占位 -->
    <div class="detail_kong"></div>
    <!-- 商品导航 -->
    <div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" badge="" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="" />
        <van-goods-action-button
          @click="addCard"
          type="warning"
          text="加入购物车"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
    <!-- 优惠卷 -->
    <!-- 领劵/分期 -->
    <div class="delPrice">
      <div class="delPrice_left">领劵分期</div>
      <div class="delPrice_right">
        <p class="p1">
          <span>300</span>
          <span>50</span>
          <span>10</span>
        </p>
        <p class="p2">
          <span>可选3/6/12期</span>
          <span>></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getgoodsinfo, getcartadd, getchecktoken } from "@/request/api.js";
import {Toast} from 'vant'
export default {
  data() {
    return {
      
        goodsid: "",
        num:1,
        uid:'',
        data:{}
    };
  },
  methods: {
    // 添加购物车
    async addCard() {
      //
      // 判断token 是否有效
      let getchecktokenRes = await getchecktoken();
      console.log(getchecktokenRes, 111);
      if (getchecktokenRes.data.code !== 200) {
        this.$router.push("/login");
      } else {
        let user = JSON.parse(localStorage.user);
        this.uid = user.uid
        let obj = {
          uid:this.uid,
          goodsid:this.goodsid,
          num:this.num,
        };
        console.log(obj,111);
        let getcartaddRes = await getcartadd(obj);
        // console.log(2, getcartaddRes);
        if(getcartaddRes.data.code == 200){
          Toast.success(getcartaddRes.data.msg)
        }
      }
      //
    },
  },
  async created() {
    // console.log(this.$route);
    let obj = { id: `${this.$route.query.id}` };
    // 获取商品信息
    let getgoodsinfoRes = await getgoodsinfo(obj);
    console.log(1, getgoodsinfoRes);
    this.data = getgoodsinfoRes.data.list[0];
    // 获得商品id
    this.goodsid = this.data.id;
  },
};
</script>

<style lang="less" scoped >
.img,
.img > img {
  width: 100vw;
  height: 2rem;
}
// main
.main {
  width: 100vw;
  padding: 0 0.1rem;
  box-sizing: border-box;
  p {
    &:nth-child(1) {
      span {
        &:nth-child(1) {
          // ￥
          font-size: 0.12rem;
          color: #ef624a;
        }
        &:nth-child(2) {
          // 4499
          font-size: 0.22rem;
          color: #ef624a;
        }
        &:nth-child(3) {
          // del
          font-size: 0.22rem;
          color: #ccc;
          font-size: 0.13rem;
        }
        &:nth-child(4) {
          float: right;
          // del
          font-size: 0.22rem;
          color: #ccc;
          font-size: 0.13rem;
          position: relative;

          .star {
            position: absolute;
            color: red;
            font-weight: 600;
          }
          span {
            display: inline-block;
            font-size: 0.16rem;
            margin-top: 0.12rem;
            margin-left: -0.1rem;
            font-weight: 600;
          }
        }
      }
    }
    &:nth-child(2) {
      font-weight: 600;
      margin-top: 0.1rem;
    }
    &:nth-child(3) {
      margin-top: 0.05rem;
      color: #666;
      font-size: 0.16rem;
    }
    &:nth-child(4) {
      width: 1rem;
      margin-top: 0.1rem;
      color: #fff;
      background-color: #fb8067;
      font-size: 0.12rem;
      border-radius: 0.07rem;
      text-align: center;
    }
  }
  div {
    width: 90vw;
    height: 0.4rem;
    background-color: #eee;
    font-size: 0.14rem;
    margin: 0 auto;
    position: relative;

    &:nth-child(1) {
      margin-left: 0.05rem;
      width: 80vw;
      margin-top: 0.2rem;
      color: #999;
    }
    .look {
      width: 0.3rem;
      color: #ea7c69;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
//
.detail_kong {
  width: 100vw;
  height: 0.1rem;
  background-color: #eee;
  margin-top: -0.2rem;
}
// 领劵分期
.delPrice {
  width: 100vw;
  padding: 0 0.1rem;
  box-sizing: border-box;
  margin-top: 0.3rem;
  .delPrice_left {
    float: left;
    width: 0.2rem;
    font-size: 0.14rem;
    margin-left: 0.1rem;
  }
  .delPrice_right {
    float: left;
    width: 80vw;
    margin-left: 0.2rem;
    .p1 {
      height: 0.4rem;
      border-bottom: 1px solid #ccc;
      line-height: 0.4rem;
      span {
        margin-right: 0.2rem;
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          background-image: url("./full.png");
          background-size: contain;
          padding: 0 0.1rem;
          font-size: 0.12rem;
        }
      }
    }
    .p2 {
      height: 0.4rem;
      line-height: 0.4rem;
      border-bottom: 1px solid #ccc;
      color: #666;
      font-size: 0.14rem;
      span {
        &:nth-child(2) {
          font-size: 0.16rem;
          float: right;
        }
      }
    }
  }
}
</style>